<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .title {
            line-height: 40px;
            font-weight: bold;
            text-align: center;
        }

        .list .item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 20px;
        }

        .list .item img {
            width: 60px;
            border-radius: 10px;
        }

        .empty {
            text-align: center;
            margin: 50px;
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- v-show 控制元素显示/隐藏，v-show 所在的元素一定会渲染，元素的显示/隐藏 是通过style样式中的display属性来控制的 -->
        <!-- v-if 控制元素显示/隐藏，v-if 条件成立时渲染，条件不成立不渲染，元素的显示/隐藏 是通过是否渲染该元素来控制的 -->

        <!-- 如果一个元素的显示/隐藏 比较繁琐，建议使用v-show，内存开销小 -->

        <!-- v-if 不能和 v-for 一起在同一个标签上使用，有优先级问题(v-if的优先级高于v-for) -->
        <div class="title">任务列表</div>
        <div class="list" v-if="tasklist.length !=0">
            <div class="item" v-for="(item,index) in tasklist" :key="index">
                <div class="left">
                    <img :src="item.pic" alt="">
                </div>
                <div class="middle">
                    <div class="name">{{ item.name }}</div>
                    <div class="pesc">{{ item.desc }}</div>
                </div>
                <div class="right">
                    <button @click="changeStatus(item)">{{ item.status == 1 ?'去完成' : (item.status
                        ==2 ? '领取' : '已领取')}}</button>
                    <!-- <button v-if="item.status == 1" @click="changeStatus(item)">去完成</button>
                    <button v-else-if="item.status == 2" @click="changeStatus(item)">领取</button>
                    <button v-else @click="changeStatus(item)">已领取</button> -->
                </div>
            </div>
            <!-- <div class="empty" v-show="tasklist.length == 0">任务列表为空！</div> -->
            <!-- <div class="empty" v-if="tasklist.lenght == 0">任务列表为空！</div> -->
        </div>
        <div class="empty" v-else>任务列表为空！</div>
    </div>
    <script src="./vue-2.5.21.js"></script>
</body>

</html>
<script>
    //实例化vue对象
    var v = new Vue({
        el: '#app',
        data: { //data 定义响应式数据，data的类型可以时对象 也可以是函数
            tasklist: [
                // { id: 1, pic: './img/1.jpg', name: '咪咕视频送流量', desc: '每月领500MB流量', status: 1 },
                // { id: 2, pic: './img/2.jpg', name: '咪咕视频送福利', desc: '每月领800MB流量', status: 2 },
                // { id: 3, pic: './img/3.jpg', name: '咪咕视频送套餐折扣券', desc: '每月领1500MB流量', status: 3 },
                // { id: 4, pic: './img/4.jpg', name: '咪咕视频送超级秒杀', desc: '每月领5500MB流量', status: 1 }
            ]
        },
        methods: {  //methods 定义方法(函数)
            changeStatus(item) { //这个方法的参数是 点击的任务对象
                if (item.status == 1) {
                    item.status = 2
                } else if (item.status == 2) {
                    item.status = 3
                }
            }
        }
    })
</script>